<template>
  <div style="padding: 10px">
    <el-form :model="form" label-width="120px" label-position="top">
      <el-row :gutter="20">
        <!-- First Column -->
        <el-col :span="12">
          <el-form-item label="我的积分:">
            <el-input  v-model="form.integration" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="用户名:">
            <el-input
                style="width: 100%"
                v-model="form.username"
                :disabled="disabled"
            />
          </el-form-item>

          <el-form-item label="昵称:">
            <el-input
                style="width: 100%"
                v-model="form.nickname"
                :disabled="disabled"
            />
          </el-form-item>

          <el-form-item label="手机号:">
            <el-input
                style="width: 100%"
                v-model="form.phone"
                :disabled="disabled"
            />
          </el-form-item>

          <el-form-item label="生日:">
            <el-date-picker
                style="width: 100%"
                v-model="form.birthday"
                type="date"
                placeholder="选择"
                :disabled="disabled"
            />
          </el-form-item>

        </el-col>

        <!-- Second Column -->
        <el-col :span="12">
          <el-form-item label="性别:">
            <el-radio-group v-model="form.gender" class="ml-4" :disabled="disabled">
              <el-radio :label="1" size="large">男</el-radio>
              <el-radio :label="2" size="large">女</el-radio>
              <el-radio :label="0" size="large">第三性别</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="职位:">
            <el-input
                style="width: 100%"
                v-model="form.job"
                :disabled="disabled"
            />
          </el-form-item>

          <el-form-item label="头像:">
            <el-upload
                class="upload-demo"
                :action="uploadPath"
                :headers="headers"
                name="multipartFile"
                :limit="1"
                :disabled="disabled"
                :on-success="handleSuccess"
                :on-remove="handleRemove"
                :file-list="fileList"
                :on-exceed="exceed"
                list-type="picture"
            >
              <el-button type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>

          <el-form-item label="">
            <el-button v-if="disabled" @click="disabled = false">修改信息</el-button>
            <el-button v-if="!disabled" @click="update">完成修改</el-button>
            <el-button v-if="!disabled" @click="cancelEdit">取消修改</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { Message } from 'element-ui';
import api from '../../../api/index.js';
import {updateUser} from "@/api/common/common";

export default {
  data() {
    return {
      form: {},
      disabled: true,
      fileList: [],
      uploadPath: process.env.VUE_APP_BASE_API+"/oss/upload",
      headers: {
        Authorization: localStorage.getItem("TOKEN"),
      },
    };
  },
  created() {
    // 发送用户请求
    this.$store.dispatch("getUserInfo")
    this.form = this.$store.state?.UserInfo;
    if (this.form.icon != null && this.form.icon != "") {
      this.fileList.push({
        url: this.form.icon,
      });
    }
  },
  methods: {
    handleSuccess(res, file) {
      this.fileList = [];
      this.fileList.push({
        name: file.data,
        url: res.data,
      });
    },
    handleRemove(file) {
      this.fileList.splice(0, 1);
    },
    update() {
      let phone = null;
      let icon = "";
      if (this.form.phone != "") {
        let reg = /^1[13456789]\d{9}$/;
        if (!reg.test(this.form.phone)) {
          Message.warning("手机号格式错误");
        } else {
          phone = this.form.phone;
        }
      }
      if (this.fileList.length != 0) {
        icon = this.fileList[0].url;
      }
      let params = {
        birthday: this.form.birthday,
        gender: this.form.gender,
        icon: icon,
        id: this.form.id,
        phone: phone,
        nickname: this.form.nickname,
        username: this.form.username,
        job:this.form.job
      };
      this.$api.common.updateUser(params).then((res) => {
        if (res.code == 200) {
          Message.success("修改成功,请从新登陆~");
          localStorage.removeItem("TOKEN");
          this.$router.push({
           path:"/login"
          });
        }
      });
    },
    exceed() {
      Message.warning("只能上传一张哦~");
    },
    cancelEdit() {
      this.disabled = true;
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20px 0px;
  padding-left: 100px;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
